<template>
	<view class="cover-box-item">
		<view :class="['u-cover-box',isSmall?'small':'']">
			<view class="flex-row align-center justify-center cover-box">
				<image mode="scaleToFill" :class="['cover',isSmall?'small':'']" :src="imagePrefix(photo)"></image>
			</view>
			<view class="flex-row align-center justify-center u-name-box" v-if="!hideName">
				<text class="font12 text-gray text-ellipsis">{{name}}</text>
			</view>
			<view class="master-box" v-if="isMaster&&!hideMaster">
				<text class="font12 text-white">桌主</text>
			</view>
		</view>
		<view class="flex-row justify-center align-center score-box" v-if="!hideNum">
			<text :class="num>=0?'text-price':''">{{num}}</text>
		</view>
	</view>
</template>

<script>
	import {
		imagePrefix,
	} from "@/utils/helpers.js"
	export default {
		props: {
			hideNum: Boolean,
			hideName: Boolean,
			hideMaster: Boolean,
			isMaster: Boolean,
			isSmall: Boolean,
			photo: {
				type: String,
				default: ""
			},
			name: {
				type: String,
				default: ""
			},
			num: {
				type: [String, Number],
				default: ""
			},

		},
		methods: {
			imagePrefix,
		}
	}
</script>

<style lang="scss" scoped>
	$boxSize:100rpx;
	$size:80rpx;

	$smallBoxSize:80px;
	$smallSize:60px;

	.cover-box-item {
		padding-top: 10rpx;
		padding-right: 30rpx;

		.u-name-box {
			width: 100%;
			overflow: hidden;
			height: 50rpx;
			line-height: 50rpx;
		}

		.u-cover-box {
			width: $boxSize;
			border-radius: 5rpx;
			flex-shrink: 0;
			position: relative;

			&.small {
				width: $smallBoxSize;
			}


			.cover {
				width: $size;
				height: $size;
				border: solid 1rpx #ccc;
				border-radius: 3rpx;

				&.small {
					width: $smallSize;
					height: $smallSize;
				}
			}

			.master-box {
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				padding: 0 10rpx;
				border-radius: 10rpx;
				background-color: $uni-color-error;
			}
		}
	}
</style>
